<template>
  <div id="player">
    <!-- <h2 class="title">黑云音乐</h2> -->
    <!-- 轮播图 -->
    <MySwiper></MySwiper>
    <div class="search">
      <input type="text" v-model="keyword" @keyup.enter="gotoResults"/>
      <button>
        <span class="iconfont icon-search" @click="gotoResults"></span>
      </button>
    </div>
    <div class="tab-wrapper">
      <!-- tab栏 -->
      <div class="tab-bar">
        <router-link to="/results/人生" class="bar-item" active-class="active"> 搜索结果 </router-link>
        <router-link to="/player" class="bar-item" active-class="active"> 歌曲播放 </router-link>
        <router-link to="/video" class="bar-item" active-class="active"> mv </router-link>
        <router-link to="/comment" class="bar-item" active-class="active"> 歌曲评论 </router-link>
      </div>
      <!-- 对应的内容区域 -->
      <div class="tab-content"></div>
    </div>
  </div>
</template>

<script>
import MySwiper from './MySwiper.vue'
export default {
  components: {
    MySwiper
  },
  data(){
    return {
      //搜索音乐跳转路由
      keyword:'',
    }
  },
  methods:{
    //搜索点击跳转到路由界面
    gotoResults(){
      if(this.keyword==""){
        alert('不能为空');
        return
      }
      // window.localStorage.setItem("keyword", this.keyword)
      //动态路由调用
      this.$router.push('/results/' +this.keyword)
    }
  }
  
};
</script>

<style scoped>
/* 这里的 @ 符号代表的当前项目的 src 路径，路径别名 */
@import "@/assets/css/index.css";
</style>